<template>
  <div class="page">
    <tz-filter @change="filterChange" :filter-data="filterData">
      <template v-slot:default="scope">
        <el-input :maxlength="100" class="table-filter-item" v-model.trim="scope.data.ipStr" size="small" clearable placeholder="请输入ip地址"></el-input>
        <el-input :maxlength="100" class="table-filter-item" v-model.trim="scope.data.name" size="small" clearable placeholder="请输入设备名称"></el-input>
        <el-input :maxlength="100" class="table-filter-item" v-model.trim="scope.data.orgName" size="small" clearable placeholder="请输入单位名称"></el-input>
      </template>
    </tz-filter>
      <div class="content" v-loading="loading">
<!--        <div class="flex-row" style="position:absolute; top: 10px; z-index: 999; width: 100%">-->
<!--          <div class="flex-row flex-item flex1">-->
<!--            <h3 style="margin: 5px;">故障类型</h3>-->
<!--            <el-button style="margin-left: 5px" type="text" icon="el-icon-refresh" @click="faultType = !faultType">{{faultType ? '城市' : '分组'}}</el-button>-->
<!--          </div>-->
<!--          <div class="flex-row flex-item flex1">-->
<!--            <h3 style="margin: 5px;">故障分析概览</h3>-->
<!--            <el-button style="margin-left: 5px" type="text" icon="el-icon-refresh" @click="analysisType = !analysisType">{{analysisType ? '城市' : '分组'}}</el-button>-->
<!--          </div>-->
<!--        </div>-->
        <br>
        <div class="top-charts flex-row">
          <gzlx v-if="!loading" :chart-data="faultTypeDetail" :isCity="faultType" @switch="gzlxSwitch('faultType')" class="flex1"></gzlx>
          <gzclgl v-if="!loading" :chart-data="faultDealDetail" :isCity="analysisType" @switch="gzlxSwitch('analysisType')" class="flex1"></gzclgl>
        </div>
        <tz-table
          v-if="columnConfigData"
          ref="tzTable"
          highlight-current-row
          size="mini"
          :data="loadData">
          <el-table-column
                  v-if="columnConfigData.includes('设备名称')"
                   prop="name"
                  show-overflow-tooltip
                   label="设备名称"
                   :formatter="(row) => {
                   return row.name || row.ip
                 }">
              <template slot-scope="scope">
                <high-light :value="scope.row.name" :keyword="filterData.name"></high-light>
              </template>
          </el-table-column>
          <el-table-column
                  v-if="columnConfigData.includes('故障描述')"
                  prop="summaryContentList"
                  show-overflow-tooltip
                  label="故障描述">
            <template slot-scope="scope">
              <el-popover
                      placement="top-start"
                      title="详情"
                      trigger="hover">
                <p class="desc-text text-ellipsis" slot="reference">{{ scope.row.summaryContentList[0] }}</p>
                <div class="desc-container">
                  <p v-for="(text, index) in scope.row.summaryContentList" :key="index">{{index + 1}}、 {{text}}</p>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column
                  v-if="columnConfigData.includes('单位名称')"
                  width="80"
                  prop="resourceGroupName"
                  label="单位名称">
            <template slot-scope="scope">
              <high-light :value="scope.row.resourceGroupName" :keyword="filterData.orgName"></high-light>
            </template>
          </el-table-column>
          <el-table-column
                  v-if="columnConfigData.includes('故障设备分类')"
                  prop="deviceType"
                  label="故障设备分类">
            <template slot-scope="scope">
              <el-tag
                      size="mini"
                      type="success"
              >{{deviceTypeMap[scope.row.deviceType.split('\\').shift()] || '-'}}/{{scope.row.deviceTypeTwo}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
                  v-if="columnConfigData.includes('设备code')"
                  prop="deviceId"
                  label="设备code">
          </el-table-column>
          <el-table-column
                  v-if="columnConfigData.includes('城市')"
                  prop="area"
                  label="城市">
          </el-table-column>
          <el-table-column
                  v-if="columnConfigData.includes('ip地址')"
                  prop="ip"
                  label="ip地址">
            <template slot-scope="scope">
              <high-light :value="scope.row.ip" :keyword="filterData.ipStr"></high-light>
            </template>
          </el-table-column>
          <el-table-column
              prop="faultNum"
              width="80"
              v-if="columnConfigData.includes('故障次数')"
              label="故障次数"
              :formatter="(row) => {
                   return row.faultNum || row.faultNum === 0 ? `${row.faultNum}` : '-'
               }">
          </el-table-column>
          <el-table-column
                  prop="lastcurremce"
                  show-overflow-tooltip
                  v-if="columnConfigData.includes('故障时间')"
                  label="故障时间"
                  :formatter="(row) => {
                       return row.lastcurremce || '-'
                     }">
          </el-table-column>
          <el-table-column
                  prop="createTime"
                  show-overflow-tooltip
                  v-if="columnConfigData.includes('创建时间')"
                  label="创建时间"
                  :formatter="(row) => {
                       return row.createTime ? moment(row.createTime).format('YYYY-MM-DD HH:mm:ss') : '-'
                     }">
          </el-table-column>
          <el-table-column
                  prop="syncTime"
                  show-overflow-tooltip
                  v-if="columnConfigData.includes('同步时间')"
                  label="同步时间"
                  :formatter="(row) => {
                       return row.syncTime ? moment(row.syncTime).format('YYYY-MM-DD HH:mm:ss') : '-'
                     }">
          </el-table-column>
          <el-table-column
              fixed="right"
              width="100"
              label="操作">
            <template slot="header">
              <div class="flex-row flex-item">
                <div class="flex1">操作</div>
                <i style="font-size: 18px; cursor: pointer" class="el-icon-s-tools" @click="openColConf"></i>
              </div>
            </template>
            <template slot-scope="scope">
              <el-button v-if="$auth['fault_monitor_analysis']" @click="handleClick(scope.row)" type="text" size="small">故障分析</el-button>
            </template>
          </el-table-column>
        </tz-table>
        <column-config ref="columnConf" @onSure="getConfig" :page-key="pageKey"></column-config>
      </div>
  </div>
</template>
<script>
import { networks } from '@/assets/dict'
import gzlx from './echarts/gzlx';
import gzclgl from './echarts/gzclgl';
import tzTable from '@/components/tz-table/index'
import columnConfig from '@/components/columnConfig'
import moment from 'moment'
import { mapState } from 'vuex'
import {getStorage} from '@/utils/storage';
export default {
  name: 'monitor-page',
  components: {
    tzTable,
    gzlx,
    gzclgl,
    columnConfig
  },
  data() {
    return {
      moment,
      pageKey: 'fault_monitor_page_column_config',
      columnConfigData: null,
      columnNames: ['设备名称', '故障描述', '单位名称', '故障设备分类', 'ip地址', '故障次数', '故障时间', '创建时间', '同步时间', '设备code', '城市'],
      loading: false,
      filterData: {
        network: 'JZW',
        name: '',
        ipStr: '',
        orgName: ''
      },
      networks,
      faultDealDetail: [],
      faultTypeDetail: [],
      faultType: false,
      analysisType: false,
      isEq: 0
    }
  },
  created() {
    this.columnConfigData = getStorage(this.pageKey) || [...this.columnNames]
  },
  methods: {
    openColConf() {
      this.$refs.columnConf.open(this.columnNames)
    },
    getConfig(res) {
      this.columnConfigData = res
    },
    gzlxSwitch(type) {
      this[type] = !this[type]
      this.refresh()
    },
    filterChange(res) {
      this.isEq = res.isEq
      this.refresh()
    },
    loadData(params) {
      const { network, ipStr, name, orgName } = this.filterData
      this.loading = true
      return this.$http.get('/fault/getFaultIndex', {
        params: {
          network,
          orgName,
          deviceName: name,
          ip: ipStr,
          isEq: this.isEq,
          faultType: this.faultType ? 1 : 2,
          analysisType: this.analysisType ? 1 : 2,
          ...params
        }
      }).then(res => {
        this.faultDealDetail = res.faultDealDetail || []
        this.faultTypeDetail = res.faultTypeDetail || []
        return {
          data: res.vo?.records || [],
          total: res.vo?.total
        }
      }).catch(err => {
        this.$TZmessage.error(err.error || '获取数据失败')
      }).finally(() => {
        this.loading = false
      })
    },
    refresh() {
      this.$refs.tzTable.refresh(true)
    },
    handleClick(row) {
      this.loading = true
      this.$http.get('/fault/analysisFault', {
        params: {
          id: row.id
        }
      }).then(() => {
        this.$TZmessage.success('操作成功')
        this.refresh()
      }).catch(err => {
        this.$TZmessage.error(err.msg || '操作失败')
      }).finally(() => {
        this.loading = false
      })
    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    }
  },
  computed: {
    ...mapState('dict', ['deviceTypeMap']),
  }
}
</script>
<style lang="scss" scoped>
.content {
  height: 84vh;
  position: relative;
  .top-charts {
    height: 360px;
  }
}
.desc-text {
  color: #409EFF;
}
  .desc-container {
    max-height: 200px;
    overflow: auto;
  }
</style>